var book_wrapper_container='book_wrapper_container';
var next_page_button='next_page_button';
var prev_page_button='prev_page_button';
var ctrl_w,ctrl_h,ctrl_nav_h;

var base_dir='';
var bg_root_dir='booklet/images/';
var bg_pic_matrix=[
        ['pos',50,0],
        ['plus-size',88,60],
		['bg_1.png',70,60],
		['bg_4.png',0,60],
		['bg_5.png',70,60],
		['bg_7.png',70,0],
		['bg_8.png',70,70],
		['bg_6.png',0,70],
		['bg_3.png',70,70],
		['bg_2.png',70,0],
		['bg_9.png',0,0],
	];
var bg_t=0,bg_l=0,bg_pw=0,bg_ph=0;

var $mybook_obj;
var nav_button_id='myslide_nav_button_id_';

function startup_otherslide(){
	if (view_mode==VIEW_MODE_BOOK||
			view_mode==VIEW_MODE_BOOK_DIALOG){
		base_dir=load_css('jquery.booklet.1.1.0.css','booklet/');
		bg_root_dir=base_dir+'/'+bg_root_dir;
		for (var i=2;i<bg_pic_matrix.length;i++){
			bg_pic_matrix[i][0]=bg_root_dir+bg_pic_matrix[i][0];
		}
		
		/** try to delay loading for .6 seconds in total */
		ctrl_w=$('#'+slides_container).delay(300).width();
		ctrl_h=$('#'+slides_container).delay(300).height();
		$('#'+slides_container).append(
				'<div id="'+slide_navigator+'"/>');
				/** fake the slide navigator to get its height */
		ctrl_nav_h=$('#'+slide_navigator).delay(300).height();
		slide_scale=ctrl_w/ctrl_h;
		bg_t=bg_pic_matrix[0][1];
		bg_l=bg_pic_matrix[0][2];
		bg_pw=bg_pic_matrix[1][1];
		bg_ph=bg_pic_matrix[1][2];
		var bk_w_w=ctrl_w*2+bg_pw;
		var bk_w_h=ctrl_h+bg_ph;

		var slides=$('#'+slides_container).find('.slide');
		num_slides=slides.length;
		
		var ctrl_parent=$('#'+slideshow).parent();
		ctrl_parent.append('<div id="'+book_wrapper_container+'" >'+
				'<div id="'+book_wrapper+'" class="'+book_wrapper+'">'+
				
				draw_book_bg(bg_t,
							bg_l,
							bk_w_w,
							bk_w_h)+
							
				'<a id="'+next_page_button+'"></a>'+
				'<a id="'+prev_page_button+'"></a>'+
				'<div id="'+mybook_name+'" style="display:none;">'+
				'<div id="'+mybook_content+'" class="b-load"></div>'+
				'</div></div></div>'+
			'');
		
		$('#'+book_wrapper).css({
			'width':bk_w_w,
			'height':bk_w_h,
		});
		
		if(view_mode==VIEW_MODE_BOOK){
			$('#'+book_wrapper).css({
				'margin':'0 auto',
				'position':'relative',
			});
		}else if (view_mode==VIEW_MODE_BOOK_DIALOG){
			$('#'+book_wrapper).css({
				'top':0,
				'left':($(window).width()-ctrl_w*2)/2,
				'position':'absolute',
				'z-index':5001,
			});
			
			
		}
		
		$.each(slides,function(k,v){
			slide_info[k]={
				'bg':$(v).attr('bg'),
				'id':$(v).attr('sid')!=undefined?
								$(v).attr('sid'):'',
				'data':$(v).attr('sdata')!=undefined?
								$(v).attr('sdata'):'',
			};
			
			$('#'+mybook_content).append(slides[k]);
		});
		
		$('#'+slideshow).remove();
		
		load_ex_js('jquery.booklet.1.1.0.js','booklet/',show_booklet);
	}
	
	$('#'+book_wrapper).close=function(){
		remove_all();
	};

	return $('#'+book_wrapper);
}

function show_booklet(){
	$mybook_obj=$('#'+mybook_name);
	var $bttn_next=$('#'+next_page_button);
	var $bttn_prev=$('#'+prev_page_button);

	$bttn_next.show();
	$bttn_prev.show();
	
	$mybook_obj.show().booklet({
		name:null,
		width:ctrl_w*2,
		height:ctrl_h,
		speed:800,
		direction:'LTR',
		startingPage:0,
		easing:'easeInOutQuad',
		easeIn:'easeInQuad',
		easeOut:'easeOutQuad',

		closed:true,
		closedFrontTitle:null,
		closedFrontChapter:null,
		closedBackTitle:null,
		closedBackChapter:null,
		covers:false,

		pagePadding:10,
		pageNumbers:true,

		hovers:false,
		overlays:false,
		tabs:false,
		tabWidth:60,
		tabHeight:20,
		arrows:false,
		cursor:'pointer',

		hash:false,
		keyboard:true,
		next:$bttn_next,
		prev:$bttn_prev,

		menu:null,
		pageSelector:true,
		chapterSelector:false,

		shadows:true,
		shadowTopFwdWidth:166,
		shadowTopBackWidth:166,
		shadowBtmWidth:50,

		before:function(){},
		after:function(e){
			booklet_event_pageturn(e.curr);
		}
	});
	
	if (view_mode==VIEW_MODE_BOOK_DIALOG){
		add_n_config_mask();
	}
	
	otherslide_add_nav_bar();
}

function draw_book_bg(t,l,w,h){
	var book_table_bg_id='otherslide_table_bg';
	var book_table_bg=''+
		'<table id="'+book_table_bg_id+'" '+
		'		style="width:'+(w)+'px;'+
		'			height:'+(h)+'px;'+
		'			position:absolute;'+
		'			top:'+(t)+'px;left:'+(l)+'px;"'+ 
		'		border=0'+
		'		cellspacing=0'+ 
		'		cellpadding=0'+
		'><tr>'+
		'<td style="width:'+(bg_pic_matrix[2][1])+'px;'+
		'			height:'+(bg_pic_matrix[2][2])+'px;'+
		'			"><img src="'+bg_pic_matrix[2][0]+'" width=100% height=100%></td>'+
		'<td style="width:'+(w-(bg_pic_matrix[2][1]+bg_pic_matrix[4][1]))+'px;'+
		'			height:'+(bg_pic_matrix[3][2])+'px;'+
		'			"><img src="'+bg_pic_matrix[3][0]+'" width=100% height=100%></td>'+
		'<td style="width:'+(bg_pic_matrix[4][1])+'px;'+
		'			height:'+(bg_pic_matrix[4][2])+'px;'+
		'			"><img src="'+bg_pic_matrix[4][0]+'" width=100% height=100%></td>'+
		'</tr><tr>'+
		'<td style="width:'+(bg_pic_matrix[9][1])+'px;'+
		'			height:'+(h-(bg_pic_matrix[2][2]+bg_pic_matrix[8][2]))+'px;'+
		'			" valign="top"><img src="'+bg_pic_matrix[9][0]+'" width=100% height=100%></td>'+
		'<td style="width:'+(w-(bg_pic_matrix[9][1]+bg_pic_matrix[5][1]))+'px;'+
		'			height:'+(h-(bg_pic_matrix[3][2]+bg_pic_matrix[7][2]))+'px;'+
		'			"><img src="'+bg_pic_matrix[10][0]+'" width=100% height=100%></td>'+
		'<td style="width:'+(bg_pic_matrix[5][1])+'px;'+
		'			height:'+(h-(bg_pic_matrix[4][2]+bg_pic_matrix[6][2]))+'px;'+		
		'			" valign="top"><img src="'+bg_pic_matrix[5][0]+'" width=100% height=100%></td>'+
		'</tr><tr>'+
		'<td style="width:'+(bg_pic_matrix[8][1])+'px;'+
		'			height:'+(bg_pic_matrix[8][2])+'px;'+
		'			"><img src="'+bg_pic_matrix[8][0]+'" width=100% height=100%></td>'+
		'<td style="width:'+(w-(bg_pic_matrix[8][1]+bg_pic_matrix[6][1]))+'px;'+
		'			height:'+bg_pic_matrix[7][2]+'px;'+
		'			"><img src="'+bg_pic_matrix[7][0]+'" width=100% height=100%></td>'+
		'<td style="width:'+bg_pic_matrix[6][1]+'px;'+
		'			height:'+bg_pic_matrix[6][2]+'px;'+
		'			"><img src="'+bg_pic_matrix[6][0]+'" width=100% height=100%></td>'+
		'</tr></table>';
	
	return book_table_bg;
}


function otherslide_add_nav_bar(){
    var nav_buttons_bar='myslide_nav_buttons_bar';
    
    var nav_preview_button_left='myslide_prevbtn_left';
    var nav_preview_button_right='myslide_prevbtn_right';
    
    var ctrl_name=namelist[view_mode];
    
    var prevbtn_size={width:10,height:20};
    var scale_left=10;
 
    if (nav_pos==NAVBAR_POS_TOP){
    	$('#'+ctrl_name).prepend('<div id="'+slide_navigator+'"></div>');
	}else if (nav_pos==NAVBAR_POS_BOTTOM)
    	$('#'+ctrl_name).append('<div id="'+slide_navigator+'"></div>');
    /*
    $('#'+ctrl_name).append('<div id="'+slide_navigator+'"></div>');
    */
    $('#'+slide_navigator).width(ctrl_w);
    $('#'+slide_navigator).css({
    	'margin':'0 auto',
    	'top':-85,
    	'position':'relative',
    	'z-index':10000,
    });
    
    $('#'+slide_navigator).append('<div id="'+nav_buttons_bar+'"></div>');
    var margin_left=0;
    var navbar_button_size=ctrl_nav_h-20;
    
    for (var i=0;i<num_buttons;i++){
    	margin_left=scale_left+i*(5+navbar_button_size);
    	$('#'+nav_buttons_bar).append(
    		'<img id="'+nav_button_id+i+'" src="'+button_imgs[i]+'"> '+
    		'');
    	$('#'+nav_button_id+i).css({
    		/*
    		'width':navbar_button_size,
    		'height':navbar_button_size,
    		*/
    		'top':scale_left+'px',
    		'margin-left':margin_left,
    		'position':'absolute',
    		'border':'0',
    	});
  	
    	if (button_img_wrapped){
        	$('#'+nav_button_id+i).css({
        		'width':navbar_button_size,
        		'height':navbar_button_size,
        	});
    	}
    	
    	$('#'+nav_button_id+i).click(function(){
    		var e=$(this).attr('id').split('_');
    		var idx=parseInt(e[e.length-1]);
    		callback_function.add(button_callbacks[idx]);
    		callback_function.fire();
    		callback_function.remove(button_callbacks[idx]);
    	});

    }
    
    var nav_prev_bar_left=margin_left+
    			navbar_button_size+scale_left*2;
   
    /**
     * draw the preview panel - including left and right navigation buttons
     * and the preview slide container. 
     */
    
    
    var nav_prev_bar_w=$('#'+slide_navigator).width()-
    			nav_prev_bar_left-scale_left*2;
    /*
    var nav_prev_bar_w=100;
    */
    $('#'+slide_navigator).append('<div id="'+nav_preview_bar+'"></div>');
    $('#'+nav_preview_bar).css({
    	'top':scale_left+'px',
    	'margin-left':nav_prev_bar_left,
    	'width':nav_prev_bar_w+'px',
    	'height':navbar_button_size+'px',
    	'background':nav_bgcolor,
    	'position':'absolute',
    });
    
    $('#'+nav_preview_bar).append('<div>'+
    	'<img id="'+nav_preview_button_left+'" '+
    	'	src="'+base_dir+'left-arrow.png" '+
    	'	style="position:absolute;'+
    	'		top:'+(navbar_button_size-prevbtn_size.height)/2+'px;'+
    	'		left:0px;">'+
    	'</div>');
    
    var prevbar_container_w=nav_prev_bar_w-prevbtn_size.width*2;
    $('#'+nav_preview_bar).append('<div id="'+nav_preview_bar_container+'" '+
    	'	style="position:relative;'+
    	'		top:0px;'+
    	'		left:'+prevbtn_size.width+'px;'+
    	'		width:'+prevbar_container_w+'px;'+
    	'		height:'+navbar_button_size+'px;'+
    	'		overflow:hidden;'+
    	'	">'+
    	'</div>');
    
    $('#'+nav_preview_bar).append('<div>'+
    	'<img id="'+nav_preview_button_right+'" '+
    	'	src="'+base_dir+'right-arrow.png" '+
    	'	style="position:absolute;'+
    	'		top:'+(navbar_button_size-prevbtn_size.height)/2+'px;'+
    	'		left:'+(nav_prev_bar_w-prevbtn_size.width)+'px;">'+
    	'</div>');
    
    /**
     * draw the list of preview slides
     */
    
    var prev_slideimg_h=navbar_button_size-6;
    var prev_slideimg_w=slide_scale*prev_slideimg_h;
    var prev_slideimg_inner_w=(prev_slideimg_w+6)*(num_slides);
    
    $('#'+nav_preview_bar_container).
    	append('<div id="'+nav_preview_bar_container_inner+'"></div>');
    $('#'+nav_preview_bar_container_inner).css({
    	'width':prev_slideimg_inner_w,
    	'height':navbar_button_size,
    	'position':'absolute',
    });


    for (var i=0;i<num_slides;i++){
    	var preview_id=preview_slide_id+i;
    	if (i==0){
    		prev_pos=0;
    		opacity=1;
    	}else{
    		opacity=nav_clk_opacity;
    	}
    	
    	$('#'+nav_preview_bar_container_inner).
    	append(''+
    		'<div style="'+
    		'		float:left;'+
    		'		position:relative;'+
    		'		width:'+(prev_slideimg_w+6)+'px;'+
    		'		height:'+(navbar_button_size)+'px;">'+
    		'	<img id="'+preview_id+'" src="'+slide_info[i]['bg']+'" '+
    		((i%2==1)?
    		'	style="top:3px;margin-left:8px;margin-right:3px;':
    		'	style="top:3px;margin-left:3px;margin-right:3px;')+
    		'		width:'+prev_slideimg_w+'px;'+
    		'		height:'+prev_slideimg_h+'px;'+
    		'		opacity:'+opacity+';'+
    		'		position:absolute;'+
    		'		"'+	
    		'</div>');
    	
    	$('#'+preview_id).click(function(){
    		var e=$(this).attr('id').split('_');
    		open_page(parseInt(e[e.length-1]));
    	});
    }
    
    add_dragging_effects();
    
    /** navigation buttons' (left&right) actions */
    
    $('#'+nav_preview_button_left).click(function(){
    	if(prev_slideimg_inner_w>prevbar_container_w){
	    	var step_w=nav_jumbstep*(prev_slideimg_w+6);
	    	var offs_l=$('#'+nav_preview_bar_container_inner).position().left;
	    	if (prev_slideimg_inner_w-(-offs_l+step_w)>prevbar_container_w){
	    		$('#'+nav_preview_bar_container_inner).animate({
	    			'left':offs_l-step_w,
	    		},500);
	    	}else{
	    		$('#'+nav_preview_bar_container_inner).animate({
	    			'left':prevbar_container_w-prev_slideimg_inner_w,
	    						/** 20 - width of navigation button*/
	    		},500);
	    	}
    	}
    });
    
    $('#'+nav_preview_button_right).click(function(){
    	if(prev_slideimg_inner_w>prevbar_container_w){
	    	var step_w=nav_jumbstep*(prev_slideimg_w+6);
	    	var offs_l=$('#'+nav_preview_bar_container_inner).position().left;
    		if (prev_slideimg_inner_w-(-offs_l-step_w)>prevbar_container_w&&
    				offs_l+step_w<0){
    			$('#'+nav_preview_bar_container_inner).animate({
	    			'left':offs_l+step_w,
	    		},500);
    		}else{
	    		$('#'+nav_preview_bar_container_inner).animate({
	    			'left':0,
	    		},500);
    		}
    	}
    });
    
    load_ex_js('jquery.corner.js','',otherslide_add_corner_effects);
}

function otherslide_add_corner_effects(){
	/*
	for (var i=0;i<num_buttons;i++){
		$('#'+nav_button_id+i).corner();
	}
	*/
	$('#'+nav_preview_bar).corner();
}

function open_page(pos){
	$mybook_obj.booklet(pos+1);
}

function booklet_event_pageturn(pos){
	prev_pos=curr_pos;
	curr_pos=pos;
	if ((curr_pos%2==0&&
		(prev_pos==curr_pos||
			prev_pos==curr_pos-1))||
		(curr_pos%2==1&&
		(prev_pos==curr_pos||
			prev_pos==curr_pos+1))){
		return;
	}
	
	var curr_navbtn_id=preview_slide_id+pos;
	$('#'+curr_navbtn_id).css({
		'opacity':1,
	});
	if (pos%2==1){
		$('#'+preview_slide_id+(pos+1)).css({
			'opacity':1,
		});
	}else{
		if (pos>0){
			$('#'+preview_slide_id+(pos-1)).css({
				'opacity':1,
			});
		}
	}
	
	var prev_navbtn_id=preview_slide_id+prev_pos;
	$('#'+prev_navbtn_id).css({
		'opacity':nav_clk_opacity,
	});
	if (prev_pos%2==1){
		$('#'+preview_slide_id+(prev_pos+1)).css({
			'opacity':nav_clk_opacity,
		});
	}else{
		if (prev_pos>0){
			$('#'+preview_slide_id+(prev_pos-1)).css({
				'opacity':nav_clk_opacity,
			});
		}
	}
}
